function initChangeBtn() {

    $("#identity").click(function () {
        var str = $("#divIdentity p.continue").text();
        var obj = $.trim(str);
        if (obj == "点击修改配置") {
            $("#divIdentity select").removeAttr("disabled");
            $("#divIdentity input").removeAttr("disabled");
            $("#divIdentity p.continue").text("点击保存配置");
            $("#identity").css("background-color", "rgb(238,126,45)");
        } else {
            $("#divIdentity select").attr("disabled", "disabled");
            $("#divIdentity input").attr("disabled", "disabled");
            $("#divIdentity p.continue").text("点击修改配置");
            $("#identity").css("background-color", "#40BEA6");
            updateConfigInfo("authType");
        }

    });

    $("#encryption").click(function () {
        var str = $("#div1 p.continue").text();
        var obj = $.trim(str);
        if (obj == "点击修改配置") {
            $("#div1 select").removeAttr("disabled");
            $("#div1 input").removeAttr("disabled");
            $("#div1 p.continue").text("点击保存配置");
            $("#encryption").css("background-color", "rgb(238,126,45)");
        } else {
            $("#div1 select").attr("disabled", "disabled");
            $("#div1 input").attr("disabled", "disabled");
            $("#div1 p.continue").text("点击修改配置");
            $("#encryption").css("background-color", "#40BEA6");
            updateConfigInfo("encrypt");
        }

    });

    $("#virusDefend").click(function () {
        var str = $("#div2 p.continue").text();
        var obj = $.trim(str);
        if (obj == "点击修改配置") {
            $("#div2 select").removeAttr("disabled");
            $("#div2 p.continue").text("点击保存配置");
            $("#virusDefend").css("background-color", "rgb(238,126,45)");
        } else {
            $("#div2 select").attr("disabled", "disabled");
            $("#div2 input").attr("disabled", "disabled");
            $("#div2 p.continue").text("点击修改配置");
            $("#virusDefend").css("background-color", "#40BEA6");
            updateConfigInfo("virus");
        }

    });

    $("#exception").click(function () {
        var str = $("#div3 p.continue").text();
        var obj = $.trim(str);
        if (obj == "点击修改配置") {
            $("#div3 select").removeAttr("disabled");
            $("#div3 input").removeAttr("disabled");
            $("#div3 p.continue").text("点击保存配置");
            $("#exception").css("background-color", "rgb(238,126,45)");
        } else {
            $("#div3 select").attr("disabled", "disabled");
            $("#div3 input").attr("disabled", "disabled");
            $("#div3 p.continue").text("点击修改配置");
            $("#exception").css("background-color", "#40BEA6");
            updateConfigInfo("exception");
        }

    });

    $("#retransmission").click(function () {
        var str = $("#div4 p.continue").text();
        var obj = $.trim(str);
        if (obj == "点击修改配置") {
            $("#div4 select").removeAttr("disabled");
            $("#div4 input").removeAttr("disabled");
            $("#div4 p.continue").text("点击保存配置");
            $("#retransmission").css("background-color", "rgb(238,126,45)");
        } else {
            if (checkTimeInput() == true) {
                $("#div4 select").attr("disabled", "disabled");
                $("#div4 input").attr("disabled", "disabled");
                $("#div4 p.continue").text("点击修改配置");
                $("#retransmission").css("background-color", "#40BEA6");
                updateConfigInfo("resend");
            }
        }

    });

    $("#designField").click(function () {
        var str = $("#div5 p.continue").text();
        var obj = $.trim(str);
        if (obj == "点击修改配置") {
            $("#div5 select").removeAttr("disabled");
            $("#div5 input").removeAttr("disabled");
            $("#div5 p.continue").text("点击保存配置");
            $("#designField").css("background-color", "rgb(238,126,45)");
        } else {
            $("#div5 select").attr("disabled", "disabled");
            $("#div5 input").attr("disabled", "disabled");
            $("#div5 p.continue").text("点击修改配置");
            $("#designField").css("background-color", "#40BEA6");
            updateConfigInfo("integrity");
        }
    });

};

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
        //return decodeURI(r[2]); //解决中文乱码问题
    }
}

var paramId = getQueryString("id");

function addContent(res,id) {
    //查询成功
    if (res.meta.state === "success") {
        console.log("有查询记录");
        var designInfo = res.data;
        $.ajax({
            url: HOST.concat("/protocolConfigs/designId?token=" + config.token),
            type: "GET",
            data: {
                "designId": id
            },
            success: function (configRes) {
                if(configRes.meta.state === "success"){
                    console.log(configRes);
                    console.log("************");
                    var configInfo = configRes.data;
                    $("#configDetailId").val(configRes.data.id);
                    $("#configDetailDesignId").val(configRes.data.designId);
                    if (designInfo["auth"]!= null) {
                        var authType = configInfo["authType"];
                        var authHtml = '<div class="class-detail fl mydiv" id="divIdentity">\
						<div class="class-detail-top">\
							<div class="text-center indentify-icon">\
								<i class="fa fa-handshake-o fa-5x"></i>\
							</div>\
							<h3 class="text-center">认证方式配置</h3>\
							<p class="margin-tb padding-bottom text-justify info"></p>\
							<ul class="class-detail-has margin-top text-lh-big">\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">认证方式选择</span>\
									<span class="fr text-gray-white" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
										<select style="width: 125px;" id="identityMethod" disabled="disabled">\
											<option value="0-RTT" id="identityWay0" >0-RTT ECDH</option>\
											<option value="1-RTT" id="identityWay1">1-RTT PSK</option>\
										</select>\
									</span>\
								</li>\
							</ul>\
						</div>\
						<p class="continue text-big" id="identity">点击修改配置</p>\
					</div>';
                        $("#tbody").append(authHtml);
                        if (configInfo["authType"] == "1-RTT") {
                            $("#identityWay1").attr("selected", "selected");
                        }else{
                            $("#identityWay0").attr("selected", "selected");
                        }


                    }
                    if (designInfo["encrypt"] != null) {
                        var encrypt = configInfo["encrypt"];
                        var encryptHtml = '<div class="class-detail fl mydiv" id="div1" >\
						<div class="class-detail-top">\
							<div class="text-center indentify-icon">\
								<i class="fa fa-key fa-5x"></i>\
							</div>\
							<h3 class="text-center">加密协商配置</h3>\
							<p class="margin-tb padding-bottom text-justify info"></p>\
							<ul class="class-detail-has margin-top text-lh-big">\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray" style="font-weight: bold;font-size: 13px;">选项列表</span>\
									<span class="fr text-black-gray" style="font-weight: bold;font-size: 13px;">\
										<p style="text-align: center;margin-left: -100px;">值列表</p>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">加密算法</span>\
									<span class="fr text-gray-white">\
										<select style="width: 105px;" id="encryptAlgorithm" disabled="disabled">\
											<option value="3DES" id="m3DES">3DES算法</option>\
											<option value="AES" id="AES">AES算法</option>\
											\<option value="extend" id="extend">自定义算法</option>\
										</select>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">加密模式</span>\
									<span class="fr text-gray-white">\
										<select style="width: 105px;" id="encryptMode" disabled="disabled">\
											<option value="ECB" id="ECB">ECB</option>\
											<option value="OFB" id="OFB">OFB</option>\
										</select>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">输出类型</span>\
									<span class="fr text-gray-white">\
										<select style="width: 105px;" id="encryptOutput" disabled="disabled">\
											<option value="base64" id="base64">base64</option>\
											<option value="hex" id="hex">hex</option>\
										</select>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">数据域类型</span>\
									<span class="fr text-gray-white">\
										<select style="width: 105px;" id="encryptRange" disabled="disabled">\
											<option value="0" id="range_0">协议数据部分</option>\
											<option value="1" id="range_1">整个协议报文</option>\
										</select>\
									</span>\
								</li>\
							</ul>\
						</div>\
						<p class="continue text-big" id="encryption">点击修改配置</p>\
					</div>';
                        $("#tbody").append(encryptHtml);
                        if (encrypt["algorithm"] == "3DES") {
                            $("#m3DES").attr("selected", "selected");
                        }else if(encrypt["algorithm"] == "AES"){
                            $("#AES").attr("selected", "selected");
                        }else{
                            $("#extend").attr("selected", "selected");
                        }
                        if (encrypt["mode"] == "OFB") {
                            $("#OFB").attr("selected", "selected");
                        }
                        if (encrypt["output"] == "hex") {
                            $("#hex").attr("selected", "selected");
                        }
                        if (encrypt["range"] == "1") {
                            $("#range_1").attr("selected", "selected");
                        }
                    }
                    if (designInfo["exception"] != null) {
                        var exception = configInfo["exception"];
                        var exceptionHtml = '<div class="class-detail fl mydiv" id="div3">\
						<div class="class-detail-top">\
							<div class="text-center indentify-icon">\
								<i class="fa fa-exclamation-triangle fa-5x"></i>\
							</div>\
							<h3 class="text-center">异常检测配置</h3>\
							<p class="margin-tb padding-bottom text-justify info"></p>\
							<ul class="class-detail-has margin-top text-lh-big">\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">异常检测方式</span>\
									<span class="fr text-gray-white" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
										<select style="width: 125px;" id="exceptionMethod" disabled="disabled">\
											<option value="0" id="exception_0" >数据包头溢出</option>\
											<option value="1" id="exception_1">字段类型合法性</option>\
										</select>\
									</span>\
								</li>\
							</ul>\
						</div>\
						<p class="continue text-big" id="exception">点击修改配置</p>\
					</div>';
                        $("#tbody").append(exceptionHtml);
                        if (exception["method"] == "1") {
                            $("#exception_1").attr("selected", "selected");
                        }
                    }
                    if (designInfo["virus"] != null) {
                        var virus = configInfo["virus"];
                        var virusHtml = '<div class="class-detail fl mydiv" id="div2">\
						<div class="class-detail-top">\
							<div class="text-center indentify-icon">\
								<i class="fa fa-shield fa-5x"></i>\
							</div>\
							<h3 class="text-center">防病毒配置</h3>\
							<p class="margin-tb padding-bottom text-justify info"></p>\
							<ul class="class-detail-has margin-top text-lh-big">\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray" style="font-weight: bold;font-size: 13px;">选项列表</span>\
									<span class="fr text-black-gray" style="font-weight: bold;font-size: 13px;">\
										<p style="text-align: center;margin-left: -100px;">值列表</p>\
									</span>\
								</li>\
								<li >\
									<span class="text-black-gray">防病毒方法</span>\
									<span class="fr text-gray-white">\
										<select style="width: 125px;" id="virusMethod" disabled="disabled">\
											<option value="0" id="virus_0">文件扫描</option>\
											<option value="1" id="virus_1">特征码检测</option>\
										</select>\
									</span>\
								</li>\
							</ul>\
						</div>\
						<p class="continue text-big" id="virusDefend">点击修改配置</p>\
					</div>';
                        $("#tbody").append(virusHtml);
                        if (virus["method"] == "1") {
                            $("#virus_1").attr("selected", "selected");
                        }
                    }
                    if (designInfo["resend"] != null&& designInfo["resend"]!=undefined) {
                        var resend = configInfo["resend"];
                        var resendHtml = '<div class="class-detail fl mydiv" id="div4">\
						<div class="class-detail-top">\
							<div class="text-center indentify-icon">\
								<i class="fa fa-upload fa-5x"></i>\
							</div>\
							<h3 class="text-center">通信重传配置</h3>\
							<p class="margin-tb padding-bottom text-justify info"></p>\
							<ul class="class-detail-has margin-top text-lh-big">\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray" style="font-weight: bold;font-size: 13px;">配置域</span>\
									<span class="fr text-black-gray" style="font-weight: bold;font-size: 13px;">\
									<p style="text-align: center;margin-left: -120px;">值域</p>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">重传队列大小</span>\
									<span class="fr text-gray-white">\
										<select style="width: 125px;" id="resendQueue" disabled="disabled">\
											<option value="1" id="q_1">1</option>\
											<option value="2" id="q_2">2</option>\
											<option value="3" id="q_3">3</option>\
            								<option value="4" id="q_4">4</option>\
											<option value="5" id="q_5">5</option>\
											<option value="6" id="q_6">6</option>\
											<option value="7" id="q_7">7</option>\
											<option value="8" id="q_8">8</option>\
											<option value="9" id="q_9">9</option>\
										</select>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">重传超时时间(ms):</span>\
									<span class="fr text-gray-white">\
										 <input type="" name="" id="timeInput" maxlength="6" value="' + resend["time"] + '" placeholder="超时时间" disabled="disabled"/>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">重传次数上限</span>\
									<span class="fr text-gray-white">\
										<select style="width: 125px;" id="resendCount" disabled="disabled">\
											<option value="1" id="c_1">1</option>\
											<option value="2" id="c_2">2</option>\
											<option value="3" id="c_3">3</option>\
            								<option value="4" id="c_4">4</option>\
											<option value="5" id="c_5">5</option>\
											<option value="6" id="c_6">6</option>\
											<option value="7" id="c_7">7</option>\
											<option value="8" id="c_8">8</option>\
											<option value="9" id="c_9">9</option>\
										</select>\
									</span>\
								</li>\
							</ul>\
							<hr/>\
							<div>\
                            <p style="color: red;font-size: 6px;display: inline">提示:</p>\
                            <p style="font-size: 6px;display: inline">重传超时时间不能超过30ms,小数点后保留三位小数</p>\
                            </div>\
						</div>\
						<p class="continue text-big" id="retransmission">点击修改配置</p>\
					</div>';
                        $("#tbody").append(resendHtml);
                        $("#q_" + resend["queue"]).attr("selected", "selected");
                        $("#c_" + resend["count"]).attr("selected", "selected");
                    }
                    if (designInfo["integrity"] != null) {
                        var integrity = configInfo["integrity"];
                        var integrityHtml = '<div class="class-detail fl mydiv" id="div5">\
						<div class="class-detail-top">\
							<div class="text-center indentify-icon">\
								<i class="fa fa-cog fa-5x"></i>\
							</div>\
							<h3 class="text-center">完整性校验配置</h3>\
							<p class="margin-tb padding-bottom text-justify info"></p>\
							<ul class="class-detail-has margin-top text-lh-big">\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray" style="font-weight: bold;font-size: 13px;">选项列表</span>\
									<span class="fr text-black-gray" style="font-weight: bold;font-size: 13px;">\
									<p style="text-align: center;margin-left: -100px;">值列表</p>\
									</span>\
								</li>\
								<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">\
									<span class="text-black-gray">完整性检验算法</span>\
									<span class="fr text-gray-white">\
										<select style="width: 125px;" id="integrityAlgorithm" disabled="disabled">\
											<option value="MD5" id="integrity_0">MD5</option>\
											<option value="SHA1" id="integrity_1">SHA1</option>\
											<option value="extend" id="integrity_2">自定义算法</option>\
										</select>\
									</span>\
								</li>\
							</ul>\
						</div>\
						<p class="continue text-big" id="designField">点击修改配置</p>\
					</div>';
                        $("#tbody").append(integrityHtml);
                        if (integrity["algorithm"] == "SHA1") {
                            $("#integrity_1").attr("selected", "selected");
                        }else if(integrity["algorithm"] == "MD5"){
                            $("#integrity_0").attr("selected", "selected");
                        }else{
                            $("#integrity_2").attr("selected", "selected");
                        }
                    }
                    initChangeBtn();
                }else{
                    alert("请先创建协议配置");
                    var address = "createConfiguration.html?id=" + paramId;
                    window.location.href = address;
                }

            },
            error: function () {
                console.log("请求配置错误");
            },
            dataType: "json",
        });

    }
}

function listDetailConfigInfo() {
    $.ajax({
        url: HOST.concat("/protocolDesigns/id?token=" + config.token),
        type: "GET",
        data: {
            "id": paramId
        },
        success: function (datas) {
            console.log(datas);
            console.log("-------------");
            checkLogin(datas);
            addContent(datas,paramId);
        },
        error: function () {
            console.log("请求配置错误！");
        },
        dataType: "json",
    });
}

function getDetailConfigInfo() {
    $("#tbody").empty();
    listDetailConfigInfo();
}

/**
 * 配置参数变量
 */
var Encrypt = function (algorithm, mode, output, range) {
    this.algorithm = algorithm;
    this.mode = mode;
    this.output = output;
    this.range = range;
}
var Exception = function (method) {
    this.method = method;
}
var Virus = function (method) {
    this.method = method;
}
var Resend = function (queue, time, count) {
    this.queue = queue;
    this.time = time;
    this.count = count;
}
var Integrity = function (algorithm) {
    this.algorithm = algorithm;
}

var encrypt = new Encrypt();
var exception = new Exception();
var virus = new Virus();
var resend = new Resend();
var integrity = new Integrity();
var authType = "";

function getNewConfigInfo(data, func) {

    if (func == "encrypt") {
        encrypt.algorithm = $("#encryptAlgorithm option:selected").val();
        encrypt.mode = $("#encryptMode option:selected").val();
        encrypt.output = $("#encryptOutput option:selected").val();
        encrypt.range = $("#encryptRange option:selected").val();
        data.encrypt = encrypt;
    } else if (func == "exception") {
        exception.method = $("#exceptionMethod option:selected").val();
        data.exception = exception;
    } else if (func == "virus") {
        virus.method = $("#virusMethod option:selected").val();
        data.virus = virus;
    } else if (func == "resend") {
        resend.queue = $("#resendQueue option:selected").val();
        resend.time = $("#timeInput").val();
        resend.count = $("#resendCount option:selected").val();
        data.resend = resend;
    } else if (func == "integrity") {
        integrity.algorithm = $("#integrityAlgorithm option:selected").val();
        data.integrity = integrity;
    }else{
        authType = $("#identityMethod option:selected").val();
        data.authType = authType;
    }

}

function updateConfigInfo(func) {
    var data = {};
    data.id = $("#configDetailId").val();
    data.designId = paramId;
    getNewConfigInfo(data, func);
    console.log("--#-#-#-");
    console.log(data);
    $.ajax({
        url: HOST.concat("/protocolConfigs/id?token=" + config.token),
        type: "PUT",
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function (datas) {
            checkLogin(datas);
            if (datas.meta.state === "success") {
                alert("修改成功!");
            } else {
                alert("修改失败!");
            }
        },
        error: function () {
            console.log("请求修改配置信息错误！");
        },
        dataType: "json",
    });
}

function checkTimeInput() {
    var time = $("#timeInput").val();
    if (time != '' && time != undefined) {
        var reg = /^[0-9]{1,2}([.]{1}[0-9]{1,3}){0,1}$/;
        if (reg.test(time) != true) {
            alert("重传超时时间输入不规范");
            return false;
        }else if(time>30){
            alert("重传时间不能超过30ms！");
            return false;
        } else {
            if(time==0){
                alert("重传时间不能为 0");
                return false;
            }else{
                var t = parseFloat(time);
                $("#timeInput").val(t.toFixed(3));
                return true;
            }
        }
    } else {
        alert("重传超时时间不能为空");
        return false;
    }
}
